<template>
  <div class="bodys">
    <div class="text">
      基础数据管理
    </div>
    <div>
      <el-card>
        <el-form ref="form" :model="handoff" label-width="80px">
          <el-form-item label="类别：">
            <el-select v-model="handoff.data">
              <el-option v-for="(item,index) in dataList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" icon="el-icon-edit" @click="addList">添加信息</el-button>
          </el-form-item>
        </el-form>
        <div>
          <under-child-1 v-if="(handoff.data === 1)" />
          <under-child-2 v-else-if="(handoff.data === 2)" ref="child2" />
          <under-child-3 v-else ref="child3" />
        </div>
      </el-card>
      <div>
        <!-- 行政 -->
        <el-dialog
          v-if="(handoff.data === 1)"
          title="添加行政区划代码"
          :visible.sync="dialogVisible1"
          width="30%"
        >
          <span>添加行政区划代码</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 植物 -->
        <el-dialog
          v-else-if="(handoff.data === 2)"
          title="添加植物部位代码"
          :visible.sync="dialogVisible2"
          width="40%"
          @close="botanyClose"
        >
          <div>
            <el-form ref="addRef2" :model="addFrom2" :rules="addrules2" label-width="70px" class="demo-ruleForm">

              <div class="botany-box">
                <div class="box">
                  <el-form-item label="代码：" prop="code">
                    <el-input v-model="addFrom2.code" type="number" />
                  </el-form-item>
                </div>
                <div class="box">
                  <el-form-item label="名称：" prop="name">
                    <el-input v-model="addFrom2.name" />
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="备注：">
                <el-input v-model="addFrom2.remarks" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="botanySure">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 危害 -->
        <el-drawer
          v-else
          ref="drawer"
          :visible.sync="dialog"
          direction="rtl"
          custom-class="demo-drawer"
          size="89%"
          title="添加危害症状代码"
          @close="harmClose"
        >
          <div class="demo-drawer__content">
            <el-form ref="addRef3" :model="addFrom3" :rules="addRules3" label-width="120px">
              <div class="diabox3">
                <div class="box1">
                  <el-form-item label="类别：" prop="category">
                    <el-input v-model="addFrom3.category" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="名称：" prop="name">
                    <el-input v-model="addFrom3.name" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="危害状描述：" prop="remarks">
                    <el-input v-model="addFrom3.remarks" type="textarea" placeholder="请输入" />
                  </el-form-item>
                </div>
                <div class="box2">
                  <el-form-item label="代码：" prop="code">
                    <el-input v-model="addFrom3.code" type="number" placeholder="请输入数字" />
                  </el-form-item>
                  <el-form-item label="危害部位：" prop="parts">
                    <el-checkbox-group v-model="parts" size="mini">
                      <el-checkbox-button v-for="item in botany" :key="item.id" :label="item.name" />
                    </el-checkbox-group>
                  </el-form-item>
                </div>
              </div>
              <div class="diabox3-footer">
                <el-row>
                  <el-col :span="12">
                    <div class="footer-box1">危害装典型图片： </div>
                    <div>
                      <!-- <upload-imgs v-model="addFrom3.cover" /> -->
                      <upload-img v-model="addFrom3.cover" />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="footer-box1">危害装早期图片： </div>
                    <div>
                      <!-- <upload-imgs v-model="addFrom3.early" /> -->
                      <upload-img v-model="addFrom3.early" />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="footer-box1">危害装中期图片： </div>
                    <div>
                      <!-- <upload-imgs v-model="addFrom3.middle" /> -->
                      <upload-img v-model="addFrom3.middle" />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="footer-box1">危害装晚期图片： </div>
                    <div>
                      <!-- <upload-imgs v-model="addFrom3.late" /> -->
                      <upload-img v-model="addFrom3.late" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="(dialog = false)">取 消</el-button>
              <el-button type="primary" @click="addList3">确定提交</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import UnderChild1 from './components/UnderChild1.vue'
import UnderChild2 from './components/UnderChild2.vue'
import UnderChild3 from './components/UnderChild3.vue'
import { addsymptomApi, BotanyListApi, addBotany } from '@/api/UnderlyingData'
import UploadImg from './components/uploadImg.vue'
export default {
  components: { UnderChild1, UnderChild2, UnderChild3, UploadImg },
  data() {
    return {
      pages: {
        page: 1,
        listRows: 10
      },
      // 植物根茎列表
      botany: [],
      // 切换
      handoff: {
        data: 3
      },
      // 切换数据
      dataList: [
        { label: '行政区划代码', value: 1 },
        { label: '植物部位代码', value: 2 },
        { label: '危害症状代码', value: 3 }
      ],
      // 对话框
      dialogVisible1: false,
      dialogVisible2: false,
      dialog: false,
      // 植物代码
      addFrom2: {
        id: 0,
        // 名称
        name: '',
        // 部位代码
        code: '',
        // 备注
        remarks: ''
      },
      // 植物代码表单验证
      addrules2: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      // 添加症状代码
      addFrom3: {
        id: 0,
        // 类别
        category: '',
        // 名称
        name: '',
        // 症状代码
        code: '',
        // 危害部位 多个用英文逗号拼接
        parts: '',
        // 危害状描述
        remarks: '',
        // 	典型图片
        cover: '',
        // 早期图片
        early: '',
        // 	中期图片
        middle: '',
        // 晚期图片
        late: ''
      },
      parts: [],
      // 危害状态代码表单验证
      addRules3: {
        category: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        parts: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getBotanyListApi()
  },
  methods: {
    // 植物列表
    async  getBotanyListApi() {
      this.botany = await BotanyListApi()
      console.log(this.botany)
    },
    // 添加逻辑
    addList() {
      if (this.handoff.data === 1) {
        this.dialogVisible1 = true
      } else if (this.handoff.data === 2) {
        this.dialogVisible2 = true
      } else {
        this.dialog = true
      }
    },
    // 植物表单确定提交
    async botanySure() {
      this.$refs.addRef2.validate(async(valid) => {
        if (!valid) return false
        await addBotany(this.addFrom2)
        this.$refs.child2.getdata2Api()
        this.dialogVisible2 = false
        this.$message.success('添加成功！')
      })
    },
    // 植物对话框关闭
    botanyClose() {
      this.addFrom2 = {}
    },
    // 危害表单确定提交
    addList3() {
      this.addFrom3.cover = this.addFrom3.cover.slice(34)
      this.addFrom3.early = this.addFrom3.early.slice(34)
      this.addFrom3.middle = this.addFrom3.middle.slice(34)
      this.addFrom3.late = this.addFrom3.late.slice(34)
      this.addFrom3.parts = this.parts.join(',')
      console.log(this.addFrom3)
      this.$refs.addRef3.validate(async(valid) => {
        if (!valid) return false

        const res = await addsymptomApi(this.addFrom3)
        if (res === null) {
          this.$message.error('该\"名称\"或”代码“已存在！')
        } else {
          this.dialog = false
          this.$refs.child3.getdata3Api()
          this.$message.success('添加成功！')
        }
      })
    },
    // 危害对话框关闭
    harmClose() {
      console.log(111)
      // this.$refs.addRef3.resetFields()
      this.parts = []
      this.addFrom3 = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.bodys {
  padding: 10px;
}
.text {
  height: 60px;
  font-size: 20px;
  margin-left: 10px;
  color: #888;
  margin-right: 20px;
  font-weight: 500;
  font-size: 22px;
  line-height: 60px;
  margin-left: 20px;
}
.el-button {
  margin-left: 30px;
}
// 危害样式
.diabox3{
  display: flex;
  justify-content: space-evenly;
  .box1{
    width: 50%;
  }
  .box2{
    width: 40%;
  }
}
.diabox3-footer{
 .el-col{
  margin-bottom: 50px;
  .footer-box1{
    float: left;
    margin-left: 6.5%;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 700;
  }
 }
}
.demo-drawer__footer{
  float: right;
  margin-right: 5%;
}
.el-checkbox-group{
  width: 50%;
  margin-left: 10px;
}
// 植物样式
.botany-box{
  display: flex;
  justify-content: space-between;
  .box{
    width: 50%;
  }
}
</style>
